<template>
  <ul @click="handleClick">
    <li>
      <img :src="list.img | wh('180.270')" alt="">
    </li>
    <li>
      <h1>
        <span>{{list.nm}}</span>
        <span class="version v3d imax"></span>
      </h1>
      <p>{{list.cat}}</p>
      <p>{{list.desc}}</p>
      <p>今天{{list.dur}}家影院上映{{list.snum}}场</p>
    </li>
    <MovieListBtn :list="list"></MovieListBtn>
  </ul>
</template>

<script>
import MovieListBtn from './MovieListBtn'
export default {
  props: {
    list: Object
  },
  components: {
    MovieListBtn
  },
  methods: {
    handleClick() {
      this.$router.push('/details')
    }
  },
}
</script>

<style lang='stylus' scoped>
@import '~@a/stylus/border.styl'
@import '~@a/stylus/ellipsis.styl'
ul
  display flex
  margin-left .12rem
  border_1px(0 0 1px 0)
  >li:first-child
    padding .12rem .12rem .12rem 0
    img
      width .64rem
      height .9rem

  >li:nth-child(2)
    flex 1
    display flex
    flex-direction column
    justify-content center
    h1
      font-size .16rem
      font-weight normal
      line-height .3rem
      align-items center
      display flex
      > span:first-child
        ellipsis_ml()

      .pre-show,
      .version {
        background-size: contain;
        background-repeat: no-repeat;
        height: 14px;
        width: 17px;
        display: inline-block;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        margin-right: 3px
        margin-left: 3px

      }

      .pre-show {
        width: 23px;
        background-image: url('')
      }

      .version.v2d.imax {
        width: 43px;
        background-image: url('')
      }

      .version.v2d.imax+div.title {
        max-width: calc(100% - 43px)
      }

      .version.v3d {
        background-image: url('')
      }

      .version.v3d.imax {
        width: 43px;
        background-image: url('')
      }

      .version.v3d.imax+div.title {
        max-width: calc(100% - 43px)
      }

    p
      color #333
      &:nth-of-type(3)
        color #666

      &:nth-of-type(2)
        ellipsis_ml()
      

  &:last-child
    border_1px(0)

</style>